<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue'
import { useRouter } from 'vue-router'
// 引用dialog的pinia
import { useDialogStore } from '@/stores/dialog'
import { Close } from '@element-plus/icons-vue'
import { baseToolsStore } from '@/stores/baseTools'
import { storeToRefs } from 'pinia'
const useToolsStore = baseToolsStore()
const { groupLeft, groupRight } = storeToRefs(useToolsStore)
const router = useRouter()
const currentPath = router.currentRoute.value.path
const props = defineProps({
  titleInfo: {
    type: Object,
    default: () => {
      return {
        title: '', // 标题
        textAlign: 'left', // left center right 对齐方式
        style: 'style1', // 样式风格
      }
    },
  } as any,
  replaceOption: {
    type: Object,
    default: () => {
      return {
        start: '{', // 开始标记
        end: '}', // 结束标记
        rStart: '<span class="replacement">(', // 替换前的标记
        rEnd: ')</span>', // 替换后的标记
      }
    },
  },
  componentName: {
    type: String,
    default: '',
  },
  moreBtn: {
    type: Object,
    default: () => {
      return {
        show: false, // 是否显示更多按钮
        position: 'right', // 按钮位置 left right
        transition: 'left', // 动画方向 left right
        childTitle: '', // 子盒子标题
        pName: 'l-box', // 盒子样式类名
      }
    },
  },
})
const title = ref('') as any
const boxCom = ref('') as any
const lock = ref(false)

const move = () => {
  if (title.value == null || boxCom.value == null) return
  const titleWidth = title.value.clientWidth
  const boxComWidth = boxCom.value.clientWidth
  // 获取 title boxCom 内文字总长度
  const titleTextWidth = title.value.scrollWidth
  const boxComTextWidth = boxCom.value.scrollWidth
  // 当 titleTextWidth > titleWidth 时，h1 向左滑动
  if (titleTextWidth > titleWidth) {
    const titleH1 = title.value.querySelector('h1')
    let difference = titleTextWidth - titleWidth + 10
    let start = 0
    // titleH1向右缓慢移动
    const timer = setInterval(() => {
      titleH1.style.transform = `translateX(${start}px)`
      start -= 1
      if (start <= -(difference + 20)) {
        // titleH1反向移动
        const timer2 = setInterval(() => {
          titleH1.style.transform = `translateX(${start}px)`
          start += 1
          if (start >= 0) {
            clearInterval(timer2)
            lock.value = false
          }
        }, 20)
        clearInterval(timer)
      }
    }, 20)
  }
}

const lookTxt = () => {
  if (lock.value) return
  lock.value = true
  move()
}
const changeTitle = (timer: number, tag: null | undefined = null) => {
  if (title.value !== null) {
    setTimeout(() => {
      // 找到 h1 标签
      const h1 = title.value.querySelector('h1')
      if (h1)
        h1.innerHTML = `${h1.innerHTML
          .replace(props.replaceOption.start, props.replaceOption.rStart)
          .replace(props.replaceOption.end, props.replaceOption.rEnd)}`
    }, timer)
  }
}

const intervalTime = 5000
// 白名单
const whiteList = ['/finance', '/human']

onMounted(() => {
  if (whiteList.includes(currentPath)) {
    changeTitle(100)
  }
  setTimeout(() => {
    lookTxt()
  }, 2000)
  setInterval(() => {
    lookTxt()
  }, intervalTime)
})

watchEffect(() => {
  if (currentPath === '/finance') {
    changeTitle(900)
  }
})

// 离开时销毁定时器
onBeforeUnmount(() => {
  clearInterval(intervalTime)
})
const onClickTitle = () => {
  lookTxt()
  if (!props.componentName) return ''

  // 调用pinia的方法
  const dialogStore = useDialogStore()
  // 根据路由添加类名实现改变弹窗背景
  if (currentPath.includes('human')) {
    const body = document.querySelector('body')
    if (body) {
      body.classList.add('human-dialog')
    }
  }
  dialogStore.dialogInfo.componentName = props.componentName
  dialogStore.dialogInfo.visible = true
}

const childBox = ref(false) // 子盒子
const hidden = () => {
  // if (props.moreBtn.pName == 'l-box') groupLeft.value = !groupLeft.value
  // if (props.moreBtn.pName == 'r-box') groupRight.value = !groupRight.value
  childBox.value = !childBox.value // 子盒子显示隐藏
  console.log('hidden')
}

// 计算路由并返回相关 className
const groupPathName = computed(() => {
  const currentPath = router.currentRoute.value.path
  if (currentPath === '/home') return 'home-group-box' // 首页
  if (currentPath === '/supply') return 'supply-group-box' // 供应链
  if (currentPath === '/finance') return 'finance-group-box' // 财务
  if (currentPath === '/human') return 'human-group-box' // 人力
  if (currentPath === '/dealer') return 'dealer-group-box' // 经销商
})
</script>

<template>
  <div :class="`box-com  ${groupPathName}`" ref="box-com">
    <div ref="title" class="title-box" @click.stop="onClickTitle">
      <el-button
        :class="`btn ${moreBtn.position ? moreBtn.position : 'right'}`"
        size="small"
        type="primary"
        @click.stop="hidden"
        alt="更多"
        v-if="moreBtn.show"
      >
        {{ $t('bi_front_distributorseemore') }}
      </el-button>
      <h1 v-if="titleInfo.title">{{ titleInfo.title }}</h1>
      <slot name="title" v-else />
    </div>
    <div class="box-content">
      <slot />
    </div>
    <div class="horn horn-l" />
    <div class="horn horn-r" />

    <transition :name="moreBtn.transition ? moreBtn.transition : 'left'">
      <div
        :class="`side-box ${moreBtn.pName ? moreBtn.pName : 'l-box'}`"
        v-if="childBox"
      >
        <div class="side-box-content">
          <h1 class="side-box-title">
            <el-button
              class="close-btn"
              size="small"
              @click="hidden"
              alt="关闭"
            >
              <el-icon class="icon">
                <Close />
              </el-icon>
            </el-button>
            {{ moreBtn.childTitle }}
          </h1>
          <slot name="child" />
        </div>
      </div>
    </transition>
  </div>
</template>

<style lang="scss">
// 基础样式
.box-com {
  position: relative;
  width: 100%;
  overflow: hidden;

  h1 {
    // width: 100%;
    height: 35px;
    line-height: 35px;
    color: #5df5f3;
    font-size: 16px;
    font-weight: bold;
    padding: 0 5px;
    white-space: pre;
    cursor: pointer;
    span {
      color: #5df5f3;
      // margin: 0 10px;
    }
    .replacement {
      color: #f18337;
      margin: 0 10px;
    }
  }
  .title-box {
    .btn {
      background-color: rgba(11, 69, 202, 0.5);
      z-index: 10;
      // border: none;
      color: #5df5f3;
      // border-color: #5df5f3;
      position: absolute;
      top: 5px;
      .icon {
        font-size: 16px;
      }
      &.left {
        left: 5px;
      }
      &.right {
        right: 5px;
      }
    }
  }
  .side-box {
    position: fixed;
    top: 75px;
    width: calc(25vw - 0px);
    height: calc(100vh - 75px);
    overflow-y: scroll;
    overflow-x: hidden;
    z-index: 10;
    &.l-box {
      left: 0;
      .side-box-title {
        flex-direction: row-reverse;
      }
    }
    &.r-box {
      right: 0;
    }
    &.l-box,
    &.r-box {
      background-color: rgba(37, 37, 39, 0.99);
      // :deep(.box-com) {
      //   margin-bottom: 25px;
      // }
    }
    .side-box-content {
      height: auto;
      width: 100%;
      .side-box-title {
        font-size: 24px;
        font-weight: bold;
        text-indent: 1em;
        height: 45px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #5df5f3;
        background: rgba(18, 47, 119, 0.6);
        // background-color: rgba(11, 69, 202, 0.5);
        padding: 0 10px;
        .close-btn {
          background-color: transparent;
          border: none;
          color: #5df5f3;
          font-size: 18px;
        }
      }
      .btn {
        display: none;
      }
    }
  }

  .horn {
    display: none;
    position: absolute;

    bottom: 0;
    width: 25px;
    height: 25px;
    border: #00a2ff 1px solid;
    border-top: none;

    &.horn-l {
      border-right: none;
      left: 0;
    }

    &.horn-r {
      border-left: none;
      right: 0;
    }
  }
  &.human-group-box {
    // 人力组盒子样式覆盖
    .title,
    .side-box {
      background-color: rgba(16, 85, 119, 1);

      .side-box-title {
        background-color: rgba(16, 85, 119, 1);
      }
    }
    .title-box {
      background-size: cover !important;
    }
  }
}

// 通用样式 1 （业绩）
.home-box {
  .box-content,
  .left-box .box-com .box-content,
  .right-box .box-com .box-content {
    background: rgba(17, 32, 147, 0.6);
    display: flex;
    align-items: stretch;
    > div {
      flex: 1;
    }
  }

  .left-box {
    .box-com {
      .title-box {
        background: linear-gradient(
          -90deg,
          rgba(7, 19, 65, 0.7),
          rgba(46, 87, 223, 0.7)
        );
      }

      h1 {
        text-align: left;
      }
    }
  }

  .right-box {
    .box-com {
      .title-box {
        background: linear-gradient(
          90deg,
          rgba(7, 19, 65, 0.7),
          rgba(46, 87, 223, 0.7)
        );
      }

      h1 {
        text-align: right;
      }
    }
  }
}

// 通用样式 2 （经销商）
.dealer-box {
  .left-box .box-com .box-content,
  .right-box .box-com .box-content,
  .footer .box-com .box-content {
    background: rgba(16, 85, 119, 0.3);
    margin-top: 4px;
    border-radius: 5px;
    color: #fff;
  }

  .left-box .box-com,
  .right-box .box-com,
  .footer .box-com {
    .title-box {
      background: url('@/assets/images/dealer/dearler-title-bg.png') no-repeat 0
        0;
      background-size: contain;
    }

    h1 {
      text-align: left;

      text-indent: 1.5em;

      border-bottom: 1px solid #80bdf8;
    }

    .horn {
      display: none;
    }
  }
}

// 通用样式 3 (财务)
.finance-box {
  .left-box .box-com .box-content,
  .right-box .box-com .box-content {
    background: rgba(18, 47, 119, 0.6);
    color: #fff;
  }

  .left-box .box-com,
  .right-box .box-com {
    .title-box {
      background: rgba(18, 47, 119, 0.6)
        url('@/assets/images/finance/finance-title-bg.png') no-repeat 0 0;
      background-size: contain;
    }

    h1 {
      text-align: left;

      text-indent: 2.5em;

      color: #fff;
    }

    .horn {
      display: none;
    }
  }
}

// 通用样式 4 （供应链）
.supply-box {
  .left-box .box-com .box-content,
  .right-box .box-com .box-content {
    background: rgba(17, 32, 147, 0.6);
    color: #fff;
  }

  .left-box .box-com,
  .right-box .box-com {
    .title-box {
      background: url('@/assets/images/supply/supply-title-bg.png') no-repeat
        left bottom;

      background-size: 45px;
    }

    h1 {
      text-align: left;

      text-indent: 2em;
      color: #fff;
    }

    .horn {
      display: none;
    }
  }
}

//  通用样式 5 （人力资源）
.human-box {
  .left-box .box-com .box-content,
  .right-box .box-com .box-content {
    background-color: rgba(16, 80, 100, 0.4);
    color: #fff;
  }
  .left-box .box-com,
  .right-box .box-com {
    .title-box {
      background: url('@/assets/images/human/human-title-bg.png') no-repeat;
      background-size: contain;
    }

    h1 {
      line-height: 28px;
      text-align: left;
      text-indent: 2em;
      color: #fff;
    }

    .horn {
      display: none;
    }
  }
}
.animation-dialog {
  .title-box {
    .btn {
      display: none;
    }
  }
}
</style>
